<!DOCTYPE html>
<html lang="en">

<head>
	<title>Roll-ups</title>

	<link rel="icon"
		  type="image/png"
		  href="img/favicon.png"/>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/rollup.css" rel="stylesheet">

	<script src="rollup-js/third-party/underscore-min-1.8.3.js"></script>
	<script src="rollup-js/third-party/jquery-min-2.1.3.js"></script>
	<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="rollup-js/third-party/angular-min-1.4.5.js"></script>
	<script src="rollup-js/third-party/angular-strap-min-2.3.3.js"></script>
	<script src="rollup-js/third-party/angular-strap.tpl-min-2.3.3.js"></script>
	<script src="rollup-js/third-party/angular-ui-bootstrap-min-0.14.1.js"></script>
	<script src="rollup-js/third-party/bootbox.js"></script>
	<script src="rollup-js/third-party/bootstrap-tooltip-3.3.5.js"></script>
	<script src="rollup-js/rollupModule.js"></script>
	<script src="rollup-js/kairosdbDatasource.js"></script>
	<script src="rollup-js/rollupController.js"></script>
	<script src="rollup-js/pasteQueryController.js"></script>
</head>

<body ng-app="rollupApp" ng-controller="rollupController" background="css/brickwall.png">

<div class="container-fluid">
	<div class="page-header" style="font-family: Lucida Console, Monaco, monospace">
		<div class="text-center text-info">
			<h1>Roll-ups</h1>
		</div>

		<div class="text-center text-info" data-toggle="collapse" data-target="#description">
			<a href="#" style="font-size: 12px">What's a Roll-up?</a>
		</div>

		<div id="description" class="text-info collapse" style="width: 50%; float: none; margin: 0 auto; margin-top: 30px">
			Roll-ups are a way to improve query performance by aggregating or
			rolling up data into a larger time range such as averaging
			millisecond data over a minute.
			Roll-ups perform queries on existing data, aggregate the data, and
			write the results to another metric. The original data is left
			intact.
			Roll-ups are continuously run on a schedule rolling up a small time
			period of data on each execution.
		</div>

		<span id="lastSaved"
			  class="last-saved pull-left text-info small"
			  ng-hide="lastSaved == null">Last Saved {{lastSaved}}</span>
	</div>

	<button id="small" type="button" class="btn btn-primary" ng-disabled="!anyTasksSelected()" ng-click="deleteSelected()">Delete</button>

	<p></p>

	<table class="table table-striped table-bordered" data-sort-name="metric-name"  data-sort-order="asc">
		<thead>
		<tr class="text-info">
            <th></th>
			<th data-field="select" data-sortable="false">
				<div class="dropdown">
					<button id="small"
							class="btn btn-primary dropdown-toggle"
							type="button" data-toggle="dropdown"

					>Select <span class="caret"></span></button>
					<ul class="dropdown-menu">
						<li><a href="#" ng-click="selectAllTasks()">All</a></li>
						<li><a href="#" ng-click="selectNoTasks()">None</a></li>
					</ul>
				</div>
			<th data-field="name" data-sortable="true">
				<span title="{{TOOLTIP_TASK_NAME}}" bs-tooltip="">Name</span></th>
			<th data-field="metric-name" data-sortable="true">
				<span title="{{TOOLTIP_METRIC_NAME}}" bs-tooltip="">Metric</span></th>
			<th data-field="save as"  data-sortable="true">
				<span title="{{TOOLTIP_SAVE_AS}}" bs-tooltip="">Save As</span></th>
			<th data-field="execute" data-sortable="true">
				<span title="{{TOOLTIP_EXECUTE}}" bs-tooltip="">Execute</span></th>
			<th data-field="group-by" data-sortable="true">
				<span title="{{TOOLTIP_GROUP_BY}}" bs-tooltip="">Group By</span></th>
			<th data-field="group-by" data-sortable="true">
				<span title="{{TOOLTIP_TAGS}}" bs-tooltip="">Tags</span></th>
			<th data-field="aggregator" data-sortable="true">
				<table>
					<tr>
                        <td><span title="{{TOOLTIP_AGGREGATOR}}" bs-tooltip="">Aggregators</span></td>
						<td valign="top" style="padding-left:3px;">
							<span custom-popover
							  popover-html="Sampling is specified as a number and a time unit.
							  For example, '2h' is 2 hours. The unit can be one of the following:
							  <li>ms = millisceconds
							  <li>s = seconds
							  <li>m = minutes
							  <li>h = hours
							  <li>d = days
							  <li>w = weeks
							  <li>M = months
							  <li>y = years"
							  popover-placement="bottom"
							  title="{{TOOLTIP_SAMPLING_HELP}}" data-toggle="tooltip">
							</span>
						</td>
					</tr>
				</table>
			</th>
			<th data-field="buttons" class="no-padding text-center col-md-1"
				data-sortable="true">
				<table class="center-table">
					<tr>
						<td>
							<a href="#" ng-click="addTask()"
							   class="btn btn-primary btn-sm btn-circle"
							   title="{{TOOLTIP_ADD_ROLL_UP}}" bs-tooltip
							   style="margin-right: 3px">
								<span class="glyphicon glyphicon-plus"></span>
							</a>
						</td>
						<td>
							<a href="#" ng-click="pasteQuery()"
							   class="btn btn-primary btn-sm btn-circle"
							   title="{{TOOLTIP_PASTE_QUERY}}" bs-tooltip>
								<span class="glyphicon glyphicon-paste"></span>
							</a>
						</td>
					</tr>
				</table>
			</th>
		</tr>
		</thead>
		<tbody>
 		<tr ng-repeat="task in tasks">
            <td>
                <i class="glyphicon glyphicon-info-sign text-info" title="{{TOOLTIP_COMPLEX}}" bs-tooltip="" ng-show="task.complex"></i>
                <i class="glyphicon glyphicon-warning-sign text-warning" title="{{getIncompleteTooltip()}}" bs-tooltip="" ng-show="!task.complex && task.incomplete"></i>
                <i class="glyphicon glyphicon-ok text-success" title="{{TOOLTIP_COMPLETE}}" bs-tooltip="" ng-show="!task.incomplete"></i>
            </td>

            <td style="text-align: center; vertical-align: top">
				<input type="checkbox" value="" ng-checked="task.selected" ng-model="task.selected">
			</td>

			<td>
				<table width="100%">
					<tr>
						<td class="text-columns" style="padding-left: 5px; width:99%;"><editable model="task.name" ng-blur="onBlur(task)"></editable></td>
					</tr>
				</table>
			</td>
			<td class="text-columns">
				<autocompleteeditable model="task.metric_name">{{task.metric_name }}</autocompleteeditable>
			</td>
			<td class="text-columns">
				<editable model="task.save_as">{{ task.save_as }}</editable>
			</td>
			<td>
				<span ng-show="task.complex">{{ task.executionType }}</span>
				<a href=""
				   ng-show="!task.executionEdit && !task.complex"
				   ng-click="task.executionEdit=true"
				   style="color:black;"
						>{{ task.executionType }}
				</a>

				<span class="dropdown" ng-show="task.executionEdit">
					<button class="btn btn-default dropdown-toggle"
							type="button" id="executeDropdown"
							data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="true">
						{{ task.executionType }}
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu"
						aria-labelledby="executeDropdown">
						<li ng-repeat="unit in EXECUTION_TYPES">
							<a href="#" ng-click="task.executionEdit=false; setExecution(task, unit)">
								{{ unit }}
							</a>
						</li>
					</ul>
				</span>
			</td>

			<td>
				<autocomplete-with-buttons model="task" on-blur="onBlur(task)" list="suggestTagKeys(task)"/>
			</td>

			<td>
				<autocomplete-tags model="task" on-blur="onBlur(task)" key-list="suggestTagKeys(task)" value-list="suggestTagValues(task)"></autocomplete-tags>
			</td>

			<td>
				<table width="100%">
					<tr ng-repeat="aggregator in task.aggregators track by $index">
						<td>
							<span ng-show="task.complex">{{ toHumanReadableAggregator(aggregator) }}</span>
 							<span ng-show="aggregator.edit">
								<aggregator agg="aggregator"
                                            descriptors="getAggregatorDescriptors()"
                                            units="SAMPLING_UNITS"
                                            on-blur="onBlur(task)">
                                </aggregator>
							</span>
                            <a href="" ng-show="!aggregator.edit && !task.complex"
                               ng-click="aggregator.edit=true" style="color:black">
                                {{ toHumanReadableAggregator(aggregator) }}</a>

                            <a href="#" class="btn-sm btn-circle" style="margin-left:1px; margin-right:1px;"
                               ng-click="removeAggregator(task, $index)"
                               ng-show="task.aggregators.length > 1 && !aggregator.edit && !model.complex">
                                <span class="glyphicon glyphicon-remove text-danger"></span></a>

                            <a href="#" class="btn-sm btn-circle text-right" style="margin-left:1px; margin-right:5px;"
                               ng-click="addAggregator(task);scope.renderHtml();"
                               ng-if="$first"
                               ng-show="!aggregator.edit && !model.complex">
                                <span class="glyphicon glyphicon-plus shift-1-up"></span></a>
						</td>
					</tr>
				</table>
			</td>
			<td class="text-center">
				<a href="#" ng-click="deleteTaskWithConfirm(task)"
				   ng-show="!task.complex"
				   class="glyphicon glyphicon-remove text-danger"
				   title="{{TOOLTIP_DELETE_ROLLUP}}" bs-tooltip></a>
			</td>
		</tr>
		</tbody>
	</table>
</div>

  {{ tasks }}
<script>
	$(document).ready(function () {
		$("[data-toggle=tooltip]").tooltip();
	});
</script>
</body>
</html>
